<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>编辑HTTP信息</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="./layui/css/layui.css" th:href="@{/layui/css/layui.css}" media="all">
    <link rel="stylesheet" href="./style/myself.css" th:href="@{/style/myself.css}" media="all">
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="./js/html5.min.js" th:src="@{/js/html5.min.js}"></script>
    <script src="./js/respond.min.js" th:src="@{/js/respond.min.js}"></script>
    <![endif]-->
    <script type="text/javascript" charset="utf-8" th:inline="javascript">
        var ctxPath = /*[[@{/}]]*/'';
    </script>
</head>
<body>
<div class="layui-form" lay-filter="layuiadmin-form-useradmin" id="layuiadmin-form-useradmin"
     style="padding: 20px 20px 0 0;">
    <div class="layui-form-item" style="display: none;">
        <label class="layui-form-label" for="id">HTTP ID</label>
        <div class="layui-input-block">
            <input type="hidden" id="id" name="id" autocomplete="off" readonly
                   class="layui-input" th:value="${monitorHttpVo.id}">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" for="urlTarget">目标URL</label>
        <div class="layui-input-block">
            <input type="text" id="urlTarget" name="urlTarget" lay-verify="url" autocomplete="off"
                   class="layui-input" lay-verType="tips" th:value="${monitorHttpVo.urlTarget}">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">请求方法</label>
        <div class="layui-input-block" id="method-radio">
            <input type="radio" name="method" lay-filter="method" value="GET" title="GET"
                   th:checked="${monitorHttpVo.method=='GET'}? true : false">
            <input type="radio" name="method" lay-filter="method" value="POST" title="POST"
                   th:checked="${monitorHttpVo.method=='POST'}? true : false">
        </div>
    </div>
    <div class="layui-form-item-my">
        <div class="layui-tab layui-tab-brief" lay-filter="requestDataTab">
            <ul class="layui-tab-title">
                <li th:class="${monitorHttpVo.method=='GET'?'layui-this':''}" id="requestHeaderTabLi">请求头</li>
                <li th:class="${monitorHttpVo.method=='POST'?'layui-this':''}"
                    th:style="${monitorHttpVo.method=='POST'? 'display: inline-block;':'display: none;'}"
                    id="requestBodyTabLi">
                    请求体
                    <em>(<strong id="requestBodyContentTypeChecked" th:text="${monitorHttpVo.contentType}">application/x-www-form-urlencoded</strong>)</em>
                </li>
            </ul>
            <div class="layui-tab-content layui-tab-content-my">
                <!-- 请求头tab -->
                <div th:class="${monitorHttpVo.method=='GET'?'layui-tab-item layui-show':'layui-tab-item'}">
                    <!-- 请求头参数表格 -->
                    <table id="requestHeaderTable" lay-filter="requestHeaderTable"></table>
                </div>
                <!-- 请求体tab -->
                <div th:class="${monitorHttpVo.method=='POST'?'layui-tab-item layui-show':'layui-tab-item'}">
                    <!-- HTTP请求内容类型 -->
                    <label class="layui-form-label" style="display: none;"
                           for="contentType">内容类型</label>
                    <div class="layui-input-block" style="display: none;">
                        <input type="hidden" class="layui-input" autocomplete="off"
                               id="contentType" name="contentType" th:value="${monitorHttpVo.contentType}"
                               value="application/x-www-form-urlencoded" readonly>
                    </div>
                    <div class="layui-tab layui-tab-brief" lay-filter="requestBodyTab">
                        <ul class="layui-tab-title">
                            <li th:class="${monitorHttpVo.contentType=='application/x-www-form-urlencoded'?'layui-this':''}">
                                application/x-www-form-urlencoded
                            </li>
                            <li th:class="${monitorHttpVo.contentType=='application/json'?'layui-this':''}">
                                application/json
                            </li>
                        </ul>
                        <div class="layui-tab-content layui-tab-content-my">
                            <!--请求体application/x-www-form-urlencoded tab -->
                            <div th:class="${monitorHttpVo.contentType=='application/x-www-form-urlencoded'?'layui-tab-item layui-show':'layui-tab-item'}">
                                <!-- 请求体application/x-www-form-urlencoded参数表格 -->
                                <table id="request-application-x-www-form-urlencoded-BodyTable"
                                       lay-filter="request-application-x-www-form-urlencoded-BodyTable">
                                </table>
                            </div>
                            <!--请求体application/json tab -->
                            <div th:class="${monitorHttpVo.contentType=='application/json'?'layui-tab-item layui-show':'layui-tab-item'}">
                                <textarea id="requestBodyApplicationJson" name="requestBodyApplicationJson"
                                          lay-verify="json" th:text="${bodyApplicationJsonParameter}"
                                          class="layui-textarea" autocomplete="off" style="height: 200px;"
                                          placeholder='{
"hostname":"192.168.1.8",
"page":1,
"pageSize":10
}'></textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" for="monitorEnv">环境</label>
        <div class="layui-input-block">
            <select id="monitorEnv" name="monitorEnv">
                <option value="">不设置</option>
                <option th:each="monitorEnv:${monitorEnvs}" th:value="${monitorEnv}"
                        th:text="${monitorEnv}" th:selected="${monitorEnv==env}"></option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" for="monitorGroup">分组</label>
        <div class="layui-input-block">
            <select id="monitorGroup" name="monitorGroup">
                <option value="">不设置</option>
                <option th:each="monitorGroup:${monitorGroups}" th:value="${monitorGroup}"
                        th:text="${monitorGroup}" th:selected="${monitorGroup==group}"></option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" for="isEnableMonitor">是否监控</label>
        <div class="layui-input-inline">
            <input type="checkbox" name="isEnableMonitor" lay-text="是|否"
                   id="isEnableMonitor" value="1" lay-skin="switch"
                   th:checked="${monitorHttpVo.isEnableMonitor=='1'}? true : false">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" for="isEnableAlarm">是否告警</label>
        <div class="layui-input-inline">
            <input type="checkbox" name="isEnableAlarm" lay-text="是|否"
                   id="isEnableAlarm" value="1" lay-skin="switch"
                   th:checked="${monitorHttpVo.isEnableAlarm=='1'}? true : false">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" for="descr">描述</label>
        <div class="layui-input-block">
            <textarea id="descr" name="descr" class="layui-textarea" th:text="${monitorHttpVo.descr}"
                      placeholder="请输入描述" autocomplete="off"></textarea>
        </div>
    </div>
    <div class="layui-form-item layui-hide">
        <input type="button" lay-submit lay-filter="LAY-front-submit" id="LAY-front-submit" value="确认">
    </div>
</div>
<script src="./js/common.js" th:src="@{/js/common.js}" charset="utf-8"></script>
<script src="./layui/layui.js" th:src="@{/layui/layui.js}"></script>
<script type="text/html" id="requestHeaderTableOperateTpl">
    <button type="button" class="layui-btn layui-btn-radius layui-btn-xs layui-btn-primary"
            lay-event="requestHeaderTableDel">
        <i class="layui-icon layui-icon-delete"></i>删除
    </button>
</script>
<script type="text/html" id="requestBodyApplicationFormUrlencodedTableOperateTpl">
    <button type="button" class="layui-btn layui-btn-radius layui-btn-xs layui-btn-primary"
            lay-event="request-application-x-www-form-urlencoded-BodyTableDel">
        <i class="layui-icon layui-icon-delete"></i>删除
    </button>
</script>
<script charset="utf-8" th:inline="javascript">
    layui.config({
        base: ctxPath //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form', 'jquery', 'element', 'table', 'util'], function () {
        var form = layui.form, $ = layui.$, element = layui.element, table = layui.table, util = layui.util;
        var headerParameter = JSON.parse([[${monitorHttpVo.headerParameter}]]);
        var bodyParameter = JSON.parse([[${monitorHttpVo.bodyParameter}]]);
        // 监听请求方法选择
        form.on('radio(method)', function (data) {
            var method = data.value;
            if (method === 'POST') {
                $('#requestBodyTabLi').show();
            } else {
                // 点击请求体li，切换到请求头tab
                $('#requestHeaderTabLi').click();
                // 隐藏请求体tab
                $('#requestBodyTabLi').hide();
            }
            // 渲染 tab 组件
            element.render('tab', 'requestDataTab');
        });

        // 请求头tab切换
        element.on('tab(requestDataTab)', function () {
            // 执行表格“尺寸结构”的重置，它一般用于特殊情况下（如“非窗口 resize”导致的表格父容器宽度变化而引发的列宽适配异常），以保证表格在此类特殊情况下依旧能友好展示
            table.resize('request-application-x-www-form-urlencoded-BodyTable');
        });

        // 请求体tab切换，获取并设置媒体类型到input[type=hidden]，在tab标题上写明具体的媒体类型
        element.on('tab(requestBodyTab)', function () {
            var contentType = $(this).text();
            $('#contentType').val(contentType);
            $('#requestBodyContentTypeChecked').text(contentType);
        });

        ////////////////////////////////////////////// 请求头表格操作 ////////////////////////////////////////////////////

        // 初始请求头表格数据
        var requestHeaderTableData = headerParameter;

        // 渲染请求头表格
        function renderRequestHeaderTable() {
            table.render({
                id: 'requestHeaderTable',
                elem: '#requestHeaderTable',
                editTrigger: 'click', // 触发编辑的事件类型（默认 click ）。 v2.7.0 新增，之前版本固定为单击触发
                cols: [
                    [{align: 'center', title: '请求头参数', colspan: 6}],
                    [
                        {type: 'checkbox'},
                        {field: 'index', title: '索引', hide: true},
                        {field: 'key', title: '键', edit: 'text'},
                        {field: 'value', title: '值', edit: 'text', width: '30%'},
                        {field: 'describe', title: '描述', edit: 'text', width: '30%'},
                        {title: '删除', align: 'center', width: 90, templet: '#requestHeaderTableOperateTpl'}
                    ]
                ],
                data: requestHeaderTableData,
                // size: 'sm',
                page: false,
                done: function () {
                    var table = $('[lay-id="requestHeaderTable"]');
                    var html = `<div class="layui-table-page layui-table-page-my">
                                    <button type="button" class="layui-btn layui-btn-radius layui-btn-xs layui-btn-primary"
                                            lay-active="addRequestHeaderTableRow">
                                        <i class="layui-icon layui-icon-addition"></i>新增
                                    </button>
                                </div>`;
                    table.append(html);
                }
            });
        }

        // 初始化请求头表格
        renderRequestHeaderTable();

        // 监听工具条事件
        table.on('tool(requestHeaderTable)', function (obj) {
            var data = obj.data; // 得到当前行数据
            var layEvent = obj.event; // 得到 lay-event 对应的值
            if (layEvent === 'requestHeaderTableDel') {
                var indexToDelete = requestHeaderTableData.findIndex(item => item.index === data.index);
                if (requestHeaderTableData.length > 1) {
                    // 从数据数组中删除该行
                    requestHeaderTableData.splice(indexToDelete, 1);
                    // 重新渲染请求头表格
                    renderRequestHeaderTable();
                }
            }
        });

        ////////////////////////////////////////////// 请求体表格操作 ////////////////////////////////////////////////////

        // 初始请求体表格数据
        var requestBodyApplicationFormUrlencodedTableData = bodyParameter.bodyApplicationFormUrlencodedParameter;

        // 渲染请求体表格
        function renderRequestBodyApplicationFormUrlencodedTable() {
            table.render({
                id: 'request-application-x-www-form-urlencoded-BodyTable',
                elem: '#request-application-x-www-form-urlencoded-BodyTable',
                editTrigger: 'click', // 触发编辑的事件类型（默认 click ）。 v2.7.0 新增，之前版本固定为单击触发
                cols: [
                    [{align: 'center', title: 'application/x-www-form-urlencoded参数', colspan: 6}],
                    [
                        {type: 'checkbox'},
                        {field: 'index', title: '索引', hide: true},
                        {field: 'key', title: '键', edit: 'text'},
                        {field: 'value', title: '值', edit: 'text', width: '30%'},
                        {field: 'describe', title: '描述', edit: 'text', width: '30%'},
                        {
                            title: '删除',
                            align: 'center',
                            width: 90,
                            templet: '#requestBodyApplicationFormUrlencodedTableOperateTpl'
                        }
                    ]
                ],
                data: requestBodyApplicationFormUrlencodedTableData,
                // size: 'sm',
                page: false,
                done: function () {
                    var table = $('[lay-id="request-application-x-www-form-urlencoded-BodyTable"]');
                    var html = `<div class="layui-table-page layui-table-page-my">
                                    <button type="button" class="layui-btn layui-btn-radius layui-btn-xs layui-btn-primary"
                                            lay-active="addRequestBodyApplicationFormUrlencodedTableRow">
                                        <i class="layui-icon layui-icon-addition"></i>新增
                                    </button>
                                </div>`;
                    table.append(html);
                }
            });
        }

        // 初始化请求体表格
        renderRequestBodyApplicationFormUrlencodedTable();

        // 监听工具条事件
        table.on('tool(request-application-x-www-form-urlencoded-BodyTable)', function (obj) {
            var data = obj.data; // 得到当前行数据
            var layEvent = obj.event; // 得到 lay-event 对应的值
            if (layEvent === 'request-application-x-www-form-urlencoded-BodyTableDel') {
                var indexToDelete = requestBodyApplicationFormUrlencodedTableData.findIndex(item => item.index === data.index);
                if (requestBodyApplicationFormUrlencodedTableData.length > 1) {
                    // 从数据数组中删除该行
                    requestBodyApplicationFormUrlencodedTableData.splice(indexToDelete, 1);
                    // 重新渲染请求体表格
                    renderRequestBodyApplicationFormUrlencodedTable();
                }
            }
        });

        ////////////////////////////////////////////// 自定义事件监听 ////////////////////////////////////////////////////

        // 监听自定义事件
        util.event('lay-active', {
            // 请求头表格新增行事件
            addRequestHeaderTableRow: function () {
                var cacheData = table.cache['requestHeaderTable'];
                // 动态添加一行
                cacheData.push({
                    key: '',
                    value: '',
                    describe: '',
                    index: cacheData.length,
                    LAY_TABLE_INDEX: cacheData.length,
                    LAY_CHECKED: true
                });
                requestHeaderTableData = cacheData;
                // 重新渲染请求头表格
                renderRequestHeaderTable();
            },
            // 请求体表格新增行事件
            addRequestBodyApplicationFormUrlencodedTableRow: function () {
                var cacheData = table.cache['request-application-x-www-form-urlencoded-BodyTable'];
                // 动态添加一行
                cacheData.push({
                    key: '',
                    value: '',
                    describe: '',
                    index: cacheData.length,
                    LAY_TABLE_INDEX: cacheData.length,
                    LAY_CHECKED: true
                });
                requestBodyApplicationFormUrlencodedTableData = cacheData;
                // 重新渲染请求体表格
                renderRequestBodyApplicationFormUrlencodedTable();
            }
        });

        // 添加 resize 事件监听器
        // $(window).on('resize', function () {
        //     table.resize('requestHeaderTable');
        //     table.resize('request-application-x-www-form-urlencoded-BodyTable');
        // });

        // 校验表单输入合法性
        form.verify({
            //ip: function (value) {
            //    var reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
            //    if (!reg.test(value)) {
            //        return '请输入合法IP';
            //    }
            //},
            //port: function (value) {
            //    var reg = /^([0-9]|[1-9]\d|[1-9]\d{2}|[1-9]\d{3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/;
            //    if (!reg.test(value)) {
            //        return '请输入合法端口';
            //    }
            //}
            json: function (value) {
                try {
                    if (isNotEmpty(value)) {
                        JSON.parse(value);
                    }
                } catch (e) {
                    return '请输入正确的JSON';
                }
            }
        });
    });
</script>
</body>
</html>